<template>
  <div>

    <div class="fixed top-[100px] flex flex-col gap-[10px] justify-start">

      <div>

      </div>
    </div>
  </div>
  <el-button @click="dialogTableVisible = true">opne</el-button>

  <el-dialog v-model="dialogTableVisible" title="Shipping address" width="800" @opened="openedFn" @close="closefn">
    <div class="w-full h-[500px]" id="page3"></div>
    <el-button class="ml-[12px]" @click="addWall">添加围墙</el-button>
    <el-button @click="changeColor">修改颜色</el-button>
    <el-button @click="delWall">删除围墙</el-button>
    <el-button @click="showWall">隐藏/显示围墙</el-button>
    <el-button @click="suduWall">调节动效速度</el-button>
    <el-button @click="WallHeight">改变高度</el-button>
  </el-dialog>

</template>

<script setup lang="ts">
import * as mars3d from "mars3d";
const configUrl = "config/config.json";
import VScaleScreen from 'v-scale-screen'
import mapPlus from "./mapClass";


const threePlus = ref(null)
onMounted(() => {


})



const addWall = () => {
  threePlus.value.addWallGraphic(threePlus.value.graphicLayer);
}

const delWall = () => {
  if (threePlus.value.Wall) {
    threePlus.value.graphicLayer.removeGraphic(threePlus.value.Wall);
    threePlus.value.Wall = null
  }
}

const showWall = () => {
  if (threePlus.value.Wall) {
    threePlus.value.Wall.show = !threePlus.value.Wall.show;
  }
}
const suduWall = () => {
  if (threePlus.value.Wall) {
    // Wall.setStyle({
    //   speed: 100
    // });
    threePlus.value.Wall.style.materialOptions.speed = 200; // 加快动画
    threePlus.value.Wall.style = { ...threePlus.value.Wall.style }; // 触发更新

  }
}
const WallHeight = () => {
  if (threePlus.value.Wall) {
    threePlus.value.Wall.style.diffHeight = 1000; // 修改高度
    // Wall.setStyle({
    //   diffHeight: 1000
    // });

    threePlus.value.Wall.style.diffHeight = 1000;
    threePlus.value.Wall.style = { ...threePlus.value.Wall.style }; // 触发更新
  }
}


const changeColor = () => {
  // 2. 查找目标围墙（根据 remark 或 id）
  const targetGraphic = threePlus.value.graphicLayer.graphics.find(
    graphic => graphic.attr?.remark === "我是墙"
  );
  console.log(targetGraphic, 'targetGraphic')
  // 3. 修改颜色
  if (targetGraphic) {
    targetGraphic.setStyle({
      materialOptions: {
        color: "#FF0000", // 修改为红色
      }
    });
    console.log("围墙颜色已更新为红色");
  } else {
    console.error("未找到目标围墙");
  }
}








const dialogTableVisible = ref(false)

const openedFn = () => {
  threePlus.value = new mapPlus(configUrl, "page3");
}


const closefn = () => {
  threePlus.value.destroy()
}
</script>

<style></style>
